/*
 * @Author: Haor
 * @Date: 2021-12-23 12:59:55
 * @LastEditTime: 2021-12-27 12:31:56
 * @LastEditors: Please set LastEditors
 */

import { getScrollParent, debounce } from './utils'
import { LazyImage } from './lazy-image'
const _VERSION = 'v1.0.0'

/**
 * 实例
 * @param {Function} Vue 
 */
const Lazyload = (Vue) => {
    return class Lazy {
        constructor(options) {
            this.version = _VERSION
            this.options = options || {}
            this.isAddScrollListener = false
            this._containerEl = null
            
            // lazy公共池
            this.lazyImgPool = []
        }
        
        /**
         * 绑定lazy指令
         * @param {Element} el 
         * @param {Object} bindings 
         * @param {Vnode} vnode 
         */
        bindLazy(el, bindings, vnode) {
            // dom渲染完后在执行
            Vue.nextTick(() => {
                const scrollContainer = getScrollParent(el)

                // 绑定滚动事件
                if (scrollContainer && !this.isAddScrollListener) {
                    this._scrollContainer = scrollContainer
                    this.isAddScrollListener = true
                    this._bindScrollEvent()
                }
                
                // 实例化每个lazyimg
                const lazyImg = new LazyImage({
                    el: el,
                    src: bindings.value,
                    options: this.options,
                    imgRender: this.imgRender.bind(this)
                })

                // 收集所有的lazyImg实例
                this.lazyImgPool.push(lazyImg)


                // 初始化默认调用一次
                this.scrollHandler()
            })
        }

        /**
         * 绑定滚动事件
         */
        _bindScrollEvent() {
            this._scrollContainer.addEventListener(
                'scroll',
                debounce(this, this.scrollHandler, 300),
                false
            )
            return this
        }
        
        
        /**
         * 渲染图片
         * @param {Object} lazyImg lazyimg实例
         * @param {String} state 加载状态
         */
        imgRender(lazyImg, state) {
            const { el, options } = lazyImg
            const { loading, error} = options
            let src = ''
            switch(state) {
                case  'loading':
                    src = loading || '';
                    break;
                case 'error':
                    src = error || '';
                    break;
                default:
                    src = lazyImg.src || ''
                    break;
            }

            el.setAttribute('src', src)
        }

        /**
         * 滚动事件
         */
        scrollHandler() {
            const { lazyImgPool } = this
            lazyImgPool.forEach(lazyImg => {
                if (!lazyImg.loaded) {
                    // 是否在可视区域
                    if (lazyImg.checkeIsVisible()) {
                        lazyImg.loadImg() //加载图片 
                    }
                } else {
                    console.log('图片已经加载完毕！！')
                }
            })
        }
    }
}

export { Lazyload}